<!DOCTYPE html>
<html lang = "en">
    <head>
        <meta charset = "UTF-8">
        <title>最佳人选知识图谱平台</title>
        <link rel = "shortcut icon" href = "../../static/images/login/bitbug_favicon.ico" type = "image/x-icon">
        <link rel = "stylesheet" href = "../../static/mdui-v0.4.2/css/mdui.min.css">
        <link rel = "stylesheet" href = "../../static/common.css">
        <script src = "../../static/mdui-v0.4.2/js/mdui.min.js"></script>
        <script src = "https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
        <script src = "https://unpkg.com/konva@2.4.2/konva.min.js"></script>
        <style>
            #ctx-menu, #ctx-menu2 {
                position: fixed;
                right: 0px;
                top: 0px;
            }

            #search-input {
                font-size: 16px;
            }

            #search-input:focus {
                outline: none;
            }

            #newNode {
                position: fixed;
                right: 40px;
                bottom: 40px;
                font-size: 50px;
                color: #3f51b5;
                cursor: pointer;
            }


        </style>
    </head>
    <body>
        <div class = "mdui-container-fluid" id = "app">
            <div class = "mdui-col-md-2" style = "border-right: 1px solid #ddd;min-height: 1000px;">
                <div class = "user-info mdui-valign" style = "border-bottom: 1px solid #ddd;">
                    <img class = "mdui-m-l-3" style = "width:40px;" src = "/static/graph.png" alt = "">
                    <span class = "mdui-m-l-3" style = "font-size:16px;"></span>
                </div>
                <div>
                    <ul class = "mdui-list">
                        <li class = "mdui-list-item mdui-ripple">
                            <i class = "mdui-list-item-icon mdui-icon material-icons">list</i>
                            <a class = "mdui-list-item-content f14" href = "/matchingPoints">
                                匹配点
                            </a>
                        </li>
                        <li class = "mdui-list-item mdui-ripple mdui-color-indigo">
                            <i class = "mdui-list-item-icon mdui-icon material-icons">home</i>
                            <a class = "mdui-list-item-content f14" href = "/skilGraph">
                                技能图谱
                            </a>
                        </li>
                        <li class = "mdui-list-item mdui-ripple">
                            <i class = "mdui-list-item-icon mdui-icon material-icons">school</i>
                            <a class = "mdui-list-item-content f14" href = "/brandCollege">
                                985/211
                            </a>
                        </li>
                        <li class = "mdui-list-item mdui-ripple">
                            <i class = "mdui-list-item-icon mdui-icon material-icons">language</i>
                            <a class = "mdui-list-item-content f14" href = "/overseaCollege">
                                留学院校
                            </a>
                        </li>
                        <li class = "mdui-list-item mdui-ripple">
                            <i class = "mdui-list-item-icon mdui-icon material-icons">location_city</i>
                            <a class = "mdui-list-item-content f14" href = "/foreignEnterprise">
                                外国企业
                            </a>
                        </li>
                        <li class = "mdui-list-item mdui-ripple">
                            <i class = "mdui-list-item-icon mdui-icon material-icons">flag</i>
                            <a class = "mdui-list-item-content f14" href = "/industryKeyword">
                                行业关键词
                            </a>
                        </li>
                        <li class = "mdui-list-item mdui-ripple">
                            <i class = "mdui-list-item-icon mdui-icon material-icons">star</i>
                            <a class = "mdui-list-item-content f14" href = "/famousInternet">
                                知名互联网企业
                            </a>
                        </li>
                        <li class = "mdui-list-item mdui-ripple">
                            <i class = "mdui-list-item-icon mdui-icon material-icons">videogame_asset</i>
                            <a class = "mdui-list-item-content f14" href = "/gameEnterprise">
                                游戏公司
                            </a>
                        </li>
                        <li class = "mdui-list-item mdui-ripple">
                            <i class = "mdui-list-item-icon mdui-icon material-icons">videogame_asset</i>
                            <a class = "mdui-list-item-content f14" href = "/gameProduct">
                                游戏产品
                            </a>
                        </li>
                        <li class = "mdui-list-item mdui-ripple">
                            <i class = "mdui-list-item-icon mdui-icon material-icons">people</i>
                            <a class = "mdui-list-item-content f14" href = "/managementExperience">
                                管理经验
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <div class = "mdui-col-md-10">
                <div class = "mdui-col-md-2">
                    <div style = "height:930px;overflow-y: scroll;padding-right:20px;">
                        <div class = "mb10 mt10 pl10">
                            <input type = "text" style = "height:30px;width:100%;" id = "search-input">
                        </div>
                        <div class = "knowledge_items_containers">

                        </div>
                        <!--<div v-for = "i in knowledge_items" class = "knowledge_item">-->
                        <!--<div class = "mdui-chip ml5" :class = "{'mdui-chip':1,'mdui-color-indigo':selected == i}" v-on:click = "selected = i">-->
                        <!--<span class = "mdui-chip-title f13">{{i}}</span>-->
                        <!--</div>-->
                        <!--</div>-->
                    </div>
                </div>
                <div class = "mdui-col-md-10">
                    <div class = "SynonymList mt10 ml30" style = "min-height:60px;"></div>
                    <div id = "container" style = "width:2000px;height:5000px;">

                    </div>
                </div>
            </div>
        </div>
        </div>
        <div id = "ctx-menu">
            <div id = "open"></div>
            <ul class = "mdui-menu" id = "menu">
                <li class = "mdui-menu-item" id = "ctx-menu-edit">
                    <a href = "javascript:;" class = "mdui-ripple">编辑</a>
                </li>
                <li class = "mdui-menu-item" id = "ctx-menu-del">
                    <a href = "javascript:;" class = "mdui-ripple">删除</a>
                </li>
                <li class = "mdui-menu-item" id = "ctx-menu-del-node">
                    <a href = "javascript:;" class = "mdui-ripple">删除节点本身</a>
                </li>
            </ul>
        </div>
        <div id = "ctx-menu2">
            <div id = "open2"></div>
            <ul class = "mdui-menu" id = "menu2">
                <li class = "mdui-menu-item" id = "ctx-menu-edit2">
                    <a href = "javascript:;" class = "mdui-ripple">删除</a>
                </li>
            </ul>
        </div>
        <i class = "mdui-icon material-icons" id = "newNode">add_circle</i>
        <script src = "../../static/jquery.min.js"></script>
        <script src = "../../static/skillGraph.js?v=1.2"></script>
    </body>
</html>